{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bilibili视频爬取</title>
    <link rel="stylesheet" href="{% static 'bs/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bs/js/jquery.min.js' %}"></script>
    <script src="{% static 'bs/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'bs/layer-v3.1.1/layer/layer.js' %}"></script>
</head>
<body>
<div style="padding-top:100px">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="video_url">视频地址</label>
                <input type="text" class="form-control" id="video_url">
            </div>
            <div class="form-group">
                <label for="cookie">cookie</label>
                <textarea class="form-control" id="cookie"></textarea>
            </div>
            <button id="download" class="btn btn-primary">下载</button>
        </form>
    </div>
    <div class="col-md-4"></div>
</div>

</body>
<script>

    function downloadFile(name, url){
        var a = document.createElement('a');
        var eve = document.createEvent('MouseEvents');
        eve.initEvent('click', false, false);
        a.href = url;
        a.download = name;
        document.body.appendChild(a);
        a.dispatchEvent(eve);
    }

    $("#download").click(function (e){
        e.preventDefault();
        var loading;

        var url = $('#video_url').val()
        var cookie = $('#cookie').val()
        $.ajax({
            url:'/vir/download_video',
            method:'post',
            data:{
                url:url,
                cookie:cookie
            },
            beforeSend:function (){
                loading = layer.load(1, {
                        shade:[0.5, '#fff']
                    }
                );
            },
            success:function (response){
                response = JSON.parse(response)
                if (response['code'] == 'SUCCESS'){
                    var filename = response['filename'];
                    var filecount = response['count'];
                    if (filecount == 1){
                        downloadFile(filename, '/static/bs/files/MV/' + filename + '/' + filename + '.mp4')
                    } else if (filecount == 2){
                        var filelist = [
                            filename + '.mp3',
                            filename + '.mp4',
                        ];
                        filelist.forEach(function (item){
                            downloadFile(filename, '/static/bs/files/MV/' + filename + '/'  + item)
                        })
                    }
                } else {
                    layer.alert(response['message'], {
                        skin: 'layui-layer-molv' //样式类名
                        , closeBtn: 0
                    }, function () {
                        window.location.reload()
                    });
                }
            },
            complete:function (){
                layer.close(loading)
            }
        });
    });
</script>
</html>